<template>
  <div class="todoapp">
    <Head @add="addFn" @allo="allo" :list="list" />
    <List @dels="delFn" :list="shows" />
    <Foot :list="list" :flag="flag" @condition="con" @clearCompleted="dels" />
  </div>
</template>

<script>
import Head from "./views/head.vue";
import List from "./views/list.vue";
import Foot from "./views/foot.vue";
import "./styles/base.css";
import "./styles/index.css";
export default {
  name: "App",
  data() {
    return {
      //1. 父组件中定义切换状态数据=》全部 未完成 已完成
      // 2. 当前状态传递给子组件foot，根据切换状态高亮显示按钮
      // 3. 显示对应状态的任务列表数据
      flag: "all", //可以是id ，index 数字 字符串
      // list: [
      //   { id: 100, name: "吃饭", isDone: true },
      //   { id: 201, name: "睡觉", isDone: false },
      //   { id: 103, name: "打豆豆", isDone: true },
      // ],
      list: JSON.parse(localStorage.getItem("data")) || [],
    };
  },
  components: {
    Head,
    List,
    Foot,
  },
  watch: {
    list: {
      deep: true,
      // immediate:true,
      handler(arr) {
        localStorage.setItem("data", JSON.stringify(arr));
      },
    },
  },
  methods: {
    addFn(name) {
      this.list.unshift({
        id: Date.now(),
        name,
        isDone: false,
      });
    },
    delFn(id) {
      this.list = this.list.filter((item) => item.id !== id);
    },
    con(flas) {
      this.flag = flas;
    },
    dels() {
      this.list = this.list.filter((item) => !item.isDone);
      this.flag = "all";
      alert("恭喜您，请继续");
    },
    allo(isckd) {
      this.list.forEach((ele) => (ele.isDone = isckd));
    },
  },
  // 依赖list根据不同flag 计算不同状态的列表数据 计算属性是变量虽然是函数形式，所以这里的filter不用变量再去接收与直接使用
  computed: {
    shows() {
      if (this.flag === "nook") {
        return this.list.filter((obj) => !obj.isDone);
      } else if (this.flag === "ok") {
        return this.list.filter((obj) => obj.isDone);
      } else {
        return this.list;
      }
    },
  },
};
</script>

<style>
</style>
